11-0
const App = {
data() {
return {
name: '小明',
isFull: false,
link: '小明',
imageSize: 200,
dynamic: 'disabled',
breakfastShop: {
name: '奇蹟早餐',
imgUrl: 'https://picsum.photos/id/42/500/',
resizeImg: 'https://picsum.photos/id/42/500/'
},
products: [
{
name: '蛋餅',
price: 30,
vegan: false,
imgUrl: 'https://images.unsplash.com/photo-1607278967323-8766a3a501e6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
},
{
name: '飯糰',
price: 35,
vegan: false,
imgUrl: 'https://images.unsplash.com/photo-1603245460565-5a7b42a6a6f4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
}
],
}
},
methods: {
change: function (key) {
this[key] = !this[key];
},
},
};
Vue.createApp(App).mount('#app');
11-1 v-bind使用方式
<!-- v-bind為指令綁定html屬性 -->
<p>{{ breakfastShop.name }}</p>
<img v-bind:src="breakfastShop.imgUrl" v-bind:title="breakfastShop.name" class="square-img" alt="">
<h3>縮寫形式 <code>:</code></h3>
<img :src="breakfastShop.imgUrl" :title="breakfastShop.name" class="square-img" alt="">
11-2 更多屬性綁定
小明還想點餐:
<form action="">
<input type="text" value="我要吃蘿蔔糕">
<button type="submit" :disabled="isFull">送出</button>
</form>
<button type="button" v-on:click="change('isFull')">狀態切換</button>
11-3 搭配 v-for綁定
<table class="table">
<tbody>
<tr v-for="item in products" :key="item.imgUrl">
<td>
<img :src="item.imgUrl" class="square-img" alt="">
</td>
<td>
{{ item.name }}
</td>
<td>
{{ item.price }}元
</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" :id="item.name">
<label class="form-check-label" :for="item.name">
我要這個
</label>
</div>
</td>
</tr>
</tbody>
</table>
11-4 表達式運用(串接)
<p>{{ imageSize }}</p>
<input type="range" min="100" max="1000" v-model="imageSize">
<br>
<!-- 搭配表達式寫法動態切換html屬性 -->
<img :src="`${breakfastShop.resizeImg}${imageSize}`" alt=""
><br>
11-5 動態屬性綁定(注意大小寫)
<!-- 當dynamic = 'disabled',顯示 readonly,反之,顯示disabled-->
<button type="button"
v-on:click="dynamic = dynamic === 'disabled' ? 'readonly':'disabled'">切換為 {{ dynamic }}</button>
<br>
{{dynamic}}
<!-- v-bind可以綁定動態值 -->
<!-- 原本僅按鈕綁定動態值,在輸入框語法上加入:[dynamic],也跟著按鈕變動 -->
<input type="text" :[dynamic] :value="name">
!
知識點來源:六角課程
以上是今天所提供知識點如有誤,再請務必在下面留言~